<template>
    <div>
        <el-form
            :label-position="'left'"
            label-width="100px"
            style="max-width: 460px;margin-top: 50%"
        >
            <el-form-item label="旧密码">
                <el-input v-model="form.oldPassword" type="password" />
            </el-form-item>
            <el-form-item label="新密码" >
                <el-input v-model="form.newPassword" type="password"/>
            </el-form-item>
            <el-form-item label="确认新密码">
                <el-input v-model="form.checkNewPassword" type="password"/>
            </el-form-item>
        </el-form>
        <el-button @click="toProfileChange"><el-icon><ArrowLeftBold /></el-icon>返回</el-button>
        <el-button @click="summit"><el-icon><Check /></el-icon>确认</el-button>
    </div>

</template>

<script setup>
import {reactive, ref} from "vue";
    import {ElMessage} from "element-plus";
import {getWithToken, postWithToken} from "@/net/postAndGetMethodWithToken";
    import router from "@/router";
    const form = reactive({
        oldPassword:'',
        newPassword:'',
        checkNewPassword:'',
    })

    const toProfileChange=()=>{
        router.push({name:'Person-change-Profile'})
    }
    const summit =()=>{
        const regex = /^[a-zA-Z0-9]{4,15}$/ // 正则表达式
        postWithToken('/api/user/password1?password='+form.oldPassword,null,()=>{
            if( form.newPassword != form.checkNewPassword){
                ElMessage.error("新密码前后不一致")
            } else if (!regex.test(form.newPassword)) {
                ElMessage.error("密码必须在4到15位，且只包含数字和大小写字母！");
                form.newPassword = ''
                form.checkNewPassword = ''
            } else {
                postWithToken('api/user/password2?password='+form.newPassword,null, (data, code, message) => {
                    ElMessage.success("修改成功")
                    localStorage.removeItem('token')
                    location.reload()
                    // router.push('/welcome')
                }, (data, code, message) => {
                        ElMessage.warning("修改失败")
                })
            }
        },()=>{
            ElMessage.warning("旧密码错误")
        })


    }
</script>

<style scoped>

</style>